var app = new Vue({
    el: '#app',
    data: {
        
    },
    methods: {
        
    },
    computed: {
        
    },
    filters: {
        
    },
    mounted: function () {
        var swiper = new Swiper('.swiper-container',{
            direction: 'vertical'
        });
        swiper.on('slideChangeTransitionEnd', function () {
            document.querySelector(".swiper-slide-active").className += " active";
            switch(swiper.realIndex)
            {
                case 1:
                var myChart = echarts.init(document.getElementById('main0'));
                myChart.setOption(option0);
                break;
                case 2:
                var myChart = echarts.init(document.getElementById('main1'));
                myChart.setOption(option1);
                break;
                case 3:
                var myChart = echarts.init(document.getElementById('main9'));
                myChart.setOption(option9);
                break;
                case 4:
                var myChart = echarts.init(document.getElementById('main2'));
                myChart.setOption(option2);
                break;
                case 5:
                var myChart = echarts.init(document.getElementById('main3'));
                myChart.setOption(option3);
                break;
                case 6:
                var myChart = echarts.init(document.getElementById('main4'));
                myChart.setOption(option4);
                break;
                case 7:
                var myChart = echarts.init(document.getElementById('main6'));
                myChart.setOption(option6);
                break;
                case 8:
                var myChart = echarts.init(document.getElementById('main7'));
                myChart.setOption(option7);
                break;
                case 9:
                var myChart = echarts.init(document.getElementById('main8'));
                myChart.setOption(option8);
                break;
                default:
            }
        });
        
        var option0 = {
            tooltip: {
                trigger: 'item',
                formatter: "{b}：{c}%"
            },
            color:['#77C81C','#478ABE','#FFCF00'],
            legend: {
                orient: 'vertical',
                data:['无条件共享','受限共享','非共享'],
                formatter: function (name) {
                    if(name === '无条件共享'){
                        return echarts.format.truncateText('无条件共享 ：可提供给各级政府单元使用',440, '14px Microsoft Yahei', '…');
                    }else if(name === '受限共享'){
                        return echarts.format.truncateText('受限共享 ： 省大数据局会同数源单位审核同意后，提供使用',440, '14px Microsoft Yahei', '…');
                    }else if(name === '非共享'){
                        return echarts.format.truncateText('非共享 ：按照法律法规，不宜共享',240, '14px Microsoft Yahei', '…');
                    }
                },
                tooltip: {
                    show: true
                }
            },
            series: [
                {
                    type:'pie',
                    radius: ['20%', '35%'],
                    label: {
                       
                    },
                    data:[
                        {value:67, name:'无条件共享'},
                        {value:18, name:'受限共享'},
                        {value:15, name:'非共享'},
                    ]
                }
            ]
        };
        var option1 = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['归集数据量']
            },
            xAxis: {
                axisLabel: {
                    rotate: 60,
                },
                type: 'category',
                data: ['2016.12', '2017.06', '2017.12', '2018.06', '2018.12', '2019.06']
            },
            yAxis: {
                type: 'value',
                name: '单位：亿条',
            },
            series: [{
                name:'归集数据量',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                data: [10.1, 32.5, 72.8, 88.1, 124.7, 164],
                type: 'line',
                symbol: 'diamond',
                symbolSize: 10,
                tooltip: {
                    trigger: 'axis'
                },
                lineStyle: {
                    normal: {
                        color: '#37a2da',
                        width: 2,
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#77C81C'
                    }
                }
            }]
        };
        var option2 = {
            color:['#5FC5ee','#BBD152'],
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data:['已收集数据项','手工归集数据项']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    axisLabel: {
                        rotate: 60,
                    },
                    type : 'category',
                    boundaryGap : false,
                    data : ['省经信厅','省民宗委','省建设厅','省交通运输厅','省文化和旅游厅'
                    ,'省外办','省国资委','省地方金融监管局','省广电局','省统计局','省人防办',
                    '人行杭州中心支行','浙江银保监局','浙江证监局','国家统计局浙江调查总队',
                    '省地震局','省烟草专卖局']
                }
            ],
            yAxis : [
                {
                    name: '单位：项',
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'已收集数据项',
                    type:'line',
                    areaStyle: {normal: {}},
                    data:[600, 300, 1800, 1000, 800, 50, 70,10,211,180,160,140,150,60,20,150,130]
                },
                {
                    name:'手工归集数据项',
                    type:'line',
                    areaStyle: {},
                    data:[30,10,13,10,20,13,59,10,20,176,20,10,59,60,20,1,18]
                }
            ]
        };  
        var option3 = {
            color:['#77C81C','#478ABE','#FFCF00'],
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['累计问题数量','累计整改量','问题数据比例']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['2018.3','2018.6','2018.9','2018.12','2019.1','2019.5','2019.6','2019.4','2019.2','2019.3']
            },
            yAxis: [
                {
                    type: "value",
                    axisLabel: {
                        show: true,
                    }
                },{
                    type: "value",
                    position: "right",
                    axisLabel: {
                        show: true,
                    }
                }
            ],
            series: [
                {
                    name:'累计问题数量',
                    type:'line',
                    yAxisIndex: 0,
                    data:[8545, 9568, 11414, 12271, 13046, 13456, 13659 ,14126 ,14617 ,14935]
                },
                {
                    name:'累计整改量',
                    type:'line',
                    yAxisIndex: 0,
                    data:[5120, 5344, 6021, 10772, 11598, 12270, 12571, 12938, 13434, 13757]
                },
                {
                    name:'问题数据比例',
                    type:'line',
                    yAxisIndex: 1,
                    data:[0.43, 0.46, 0.52, 0.11, 0.10, 0.08, 0.07,0.08,0.07,0.07]
                }
            ]
        };
        var option4 = {
            color:['#37a2da','#77C81C'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['数据总量', '未及时更新数据']
            },
            // grid: {
            //     left: '3%',
            //     right: '4%',
            //     bottom: '3%',
            //     containLabel: true
            // },
            xAxis:  {
                axisLabel: {
                    rotate: 60,
                },
                type: 'category',
                data: ['省委编办','省发展改革委','省信访局','省教育厅',
                '省民宗委','省民政厅','省司法厅','省生态环境厅','省建设厅',
                '省农业农村厅','省文化和旅游厅','省外办','省市场监管局','省统计局',
                '省药监局','省法院','人行杭州中心支行','浙江证监局','杭州海关'],
                //'省药监局','省法院','人行杭州中心支行','浙江证监局','杭州海关'
            },
            yAxis: {
                type: 'value',
                name: '单位：类'
            },
            series: [
                {
                    name: '数据总量',
                    type: 'bar',
                    barWidth:5,
                    stack: '总量',
                    data: [5, 6, 7, 9, 5, 7, 6,10,37,12,8,4,6,10,9,4,7,9,11]
                },{
                    name: '未及时更新数据',
                    type: 'bar',
                    stack: '总量',
                    barWidth:5,
                    data: [7, 98, 7, 23, 7, 88, 94,43,130,170,42,7,111,12,22,20,11,9,32]
                },
            ]
        };   

        var option6 = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['调用量']
            },
            xAxis: {
                axisLabel: {
                    rotate: 60,
                },
                type: 'category',
                data: ['2018.06', '2018.09', '2018.12', '2019.01', '2019.02','2019.03','2019.04','2019.05','2019.06']
            },
            yAxis: {
                type: 'value',
                name: '单位：亿次',
            },
            series: [{
                name:'调用量',
                data: [0.62, 1.23, 1.76, 2.45,2.75,3.11,3.52,3.9,4.28],
                type: 'line',
                symbol: 'diamond',
                symbolSize: 10,
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                lineStyle: {
                    normal: {
                        color: '#37a2da',
                        width: 2,
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#77C81C'
                    }
                }
            }]
        };    
        
        var data7 = [{
            "value": 46,
            "name": "省公安厅"
        }, {
            "value": 21,
            "name": "省民政厅"
        }, {
            "value": 8,
            "name": "省市场监管局"
        }, {
            "value": 5,
            "name": "省人力社保厅"
        }, {
            "value": 4,
            "name": "其他单位"
        }, {
            "value": 3,
            "name": "省教育厅"
        }, {
            "value": 3,
            "name": "省发展改革委"
        }, {
            "value": 4,
            "name": "浙江省税务局"
        }, {
            "value": 2,
            "name": "省残联"
        }, {
            "value": 1,
            "name": "省自然资源厅"
        }, {
            "value": 1,
            "name": "省交通运输厅"
        }, {
            "value": 1,
            "name": "省卫生健康委"
        }]
        
        for (var n in data7) {
            data7[n]['name'] = data7[n]['name'] + ' ' + data7[n]['value'] + '%'
        }
        
        var option7 = {
            color:['#668CB9','#63C8AE','#5D83C0','#6AB7D7','#F6C358','#4972AB','#64A1D5','#FEA257','#1AACC4','#A1C459','#1B6484','#9EC9ED'],
            legend: {
                orient: 'vertical',
                x: 'left',
                data:['省公安厅','省民政厅','省市场监管局','省人力社保厅',
                '其他单位','省教育厅','省发展改革委','浙江省税务局','省残联',
                '省自然资源厅','省交通运输厅','省卫生健康委']
            },
           
            tooltip: {
                trigger: 'item',
                formatter: "{b}"
            },
            series: [{
                type: 'treemap',
                width: '100%',
                height: '100%',
                roam: false, //是否开启拖拽漫游（移动和缩放）
                nodeClick: false, //点击节点后的行为,false无反应
                breadcrumb: {
                    show: false
                },
                label: { //描述了每个矩形中，文本标签的样式。
                    normal: {
                        show: true,
                        position: ['10%', '40%']
                    }
                },
                itemStyle: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16,
                        },
                        borderWidth: 1,
                        borderColor: '#fff',
                    },
        
                    emphasis: {
                        label: {
                            show: true
                        }
                    }
                },
                data: data7
            }]
        };      
        
        var option8 = {
            grid: {
                top: "25%",
                bottom: "10%"
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow",
                    label: {
                        show: true
                    }
                }
            },
            legend: {

            },
            xAxis: {
                data: [
                    "2019年1月",
                    "2019年2月",
                    "2019年3月",
                    "2019年4月",
                    "2019年5月",
                    "2019年6月"
                ],
            },
            yAxis: [
                {
                    type: "value",
                    name: "单位：亿",
                    position: "right",
                    axisLabel: {
                        show: true,
                    }
                },{
                    type: "value",
                    name: "单位：万条",
                    axisLabel: {
                        show: true,
                    }
                },
            ],
            series: [{
                    name: "开放数据条数",
                    type: "line",
                    yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                    showAllSymbol: true, //显示所有图形。
                    symbol: "circle", //标记的图形为实心圆
                    symbolSize: 10, //标记的大小
                    itemStyle: {
                        //折线拐点标志的样式
                        color: "#058cff"
                    },
                    lineStyle: {
                        color: "#058cff"
                    },
                    data: [2343.95, 2354.2, 2356.23, 2616.12, 3743.33,4000]
                },
                {
                    name: "开放数据容量",
                    type: "line",
                    barWidth: 15,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: "#6f3d9e"
                                },
                                {
                                    offset: 1,
                                    color: "#3637a3"
                                }
                            ])
                        }
                    },
                    data: [2.54, 2.56, 2.57, 2.53, 3.45, 4.2]
                }
            ]
        };
        
        var data9 = [
        {
            name: '达100%',
            value: 34,
            top:25
        },{
            name: '达100% - 90%',
            value: 11,
            top:25
        },{
            name: '90% - 80%',
            value: 4,
            top:75
        },{
            name: '80%以下',
            value: 1,
            top:75
        }]
        
        var titleArr= [], seriesArr=[];
        colors=[['#6D8CBB', '#dfeaff'],['#62BBDB', '#ebf1f3'],['#67CCAE', '#dff9f1'], ['#FBC558', '#fbe7c0']]
        data9.forEach(function(item, index){
            seriesArr.push(
                {
                    name: item.name,
                    type: 'pie',
                    clockWise: false,
                    radius: [30+'%',45+'%'],
                    itemStyle:  {
                        normal: {
                            color: colors[index][0],
                            shadowColor: colors[index][0],
                            shadowBlur: 0,
                            label: {
                                show: true
                            },
                            labelLine: {
                                show: true
                            },
                        }
                    },
                    hoverAnimation: false,
                    center: [index%2 * 40 + 30 +'%', item.top+'%'],
                    data: [{
                        value: item.value,
                        label: {
                            normal: {
                                formatter: function(params){
                                    return params.value+'个';
                                },
                                position: 'center',
                                show: true,
                                textStyle: {
                                    fontSize: '12',
                                    fontWeight: 'bold',
                                    color: colors[index][0]
                                }
                            }
                        },
                    }, {
                        value: 100-item.value,
                        name: item.value,
                        itemStyle: {
                            normal: {
                                color: colors[index][1]
                            },
                            emphasis: {
                                color: colors[index][1]
                            }
                        }
                    }]
                }    
            )
        });
    
        
        var option9 = {
            backgroundColor: "#fff",
            series: seriesArr
        }

        document.querySelector(".swiper-slide-active").className += " active";
    }
})